<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>注册</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/public.css" />
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            background: #ededed;
        }

        #register {
            position: absolute;
            width: 100%;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            z-index: 99
        }

        .register_top {
            padding-bottom: 60px;
            text-align: center;
        }

        .register_top img {
            width: 106px;
            height: 106px;
        }

        .center {
            padding: 0 24px;
        }

        .center .input {
            height: 36px;
            line-height: 36px;
            padding: 9px;
            position: relative;
        }

        .center .interval {
            background-color: #fff;
            margin-bottom: 10px;
        }

        .center .input span {
            font-size: 0;
            height: 36px;
            line-height: 36px;
            vertical-align: middle;
        }

        .center .input span>img {
            width: 19px;
            height: 20px;
            vertical-align: middle;
        }

        .center .input input {
            outline: none;
            padding: 10px;
            display: block;
            font-size: 15px;
            color: #000;
            padding-left: 15px;
        }

        .delete {
            display: none;
        }

        .register {
            margin-top: 38px;
            padding: 0 24px;
            width: 100%;
            position: relative;
        }

        .register-btn {
            height: 45px;
            line-height: 45px;
            text-align: center;
            color: #fff;
            background: #00acff;
        }

        .login-btn {
            text-align: center;
            font-size: 12px;
            color: #666;
            display: -webkit-inline-box;
            position: absolute;
            margin-top: 10px;
            right: 24px;
        }
    </style>
</head>

<body>
    <!-- 注册 -->
    <div id="register">
        <div class="register_top">
            <img src="../../image/login/logo.png" />
        </div>
        <div class="center">
            <div class="input interval">
                <div class="flex-wrap">
                    <span>
                        <img src="../../image/login/iconuser.png">
                     </span>
                    <input class="flex-con" type="text" placeholder="用户名" id="user" />
                    <span class="delete" tapmode onclick="fnClear()">
                      <img src="../../image/login/icondelete.png">
                    </span>
                </div>
            </div>
            <div class="input interval">
                <div class="flex-wrap">
                    <span>
                      <img src="../../image/login/iconpwd.png">
                    </span>
                    <input class="flex-con" type="password" id="password" placeholder="密码" />
                </div>
            </div>
            <div class="input interval">
                <div class="flex-wrap">
                    <span>
                      <img src="../../image/login/iconpwd.png">
                    </span>
                    <input class="flex-con" type="password" id="password_confirm" placeholder="确认密码" />
                </div>
            </div>
        </div>
        <div class="register flex-box">
            <div class="register-btn" tapmode="active" onclick="fnRegister();">
                注册
            </div>
            <div class="login-btn" tapmode onclick="fnLogin();">
                去登录
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<!-- 公共js -->
<script type="text/javascript" src="../../script/common.js"></script>
<!-- 环信接口 -->
<script type="text/javascript" src="../../script/easeChat.js"></script>
<!-- sha1加密 -->
<script type="text/javascript" src="../../script/SHA1.js"></script>
<script type="text/javascript">
    apiready = function() {
        fnInit();
    };

    var eUser, ePwd, ePwdCfm; //全局声明获取用户名、密码、确认密码的dom

    function fnInit() {
        eUser = $api.byId('user');
        ePwd = $api.byId('password');
        ePwdCfm = $api.byId('password_confirm');
    }

    //根据输入框内容有无隐藏显示删除按钮
    function input() {
        // 用户名输入
        if (eUser.value !== '') {
            $api.css($api.dom('.delete'), 'display: inline;');
        } else {
            $api.css($api.dom('.delete'), 'display: none;');
        }
    }

    //清空用户名输入框
    function fnClear() {
        if (eUser.value !== '') {
            $api.css($api.dom('.delete'), 'display: none;');
            eUers.value = "";
        }
    }

    //注册
    function fnRegister() {
        eUser.blur()
        ePwd.blur()
        ePwdCfm.blur()
        if (!eUser.value) {
            toast('公共卫生：用户名不能为空！', 3000);
            return
        } else if (!ePwd.value) {
            toast('公共卫生：密码不能为空！', 3000);
            return
        } else if (!ePwdCfm.value) {
            toast('公共卫生：确认密码不能为空！', 3000);
            return
        } else if ((ePwd.value) != (ePwdCfm.value)) {
            toast('公共卫生：俩次密码不一致！', 3000);
            return
        }
        //打开登录加载状态
        showLoading();
        // 获取最新时间
        var now = Date.now();
        // appKey加密方式   A6097706885345你自己创建的app里面的id C55DBB45-AF8B-E0D4-F692-A9E2EE0DA6E6 app的appKey 这俩个字段在开发控制台里面概览
        var appKey = SHA1("A6097706885345" + "UZ" + "C55DBB45-AF8B-E0D4-F692-A9E2EE0DA6E6" + "UZ" + now) + "." + now;
        api.ajax({
            url: 'https://d.apicloud.com/mcm/api/user',
            method: 'POST',
            headers: {
                "X-APICloud-AppId": "A6097706885345",
                "X-APICloud-AppKey": appKey
            },
            data: {
                values: {
                    "username": eUser.value,
                    "password": SHA1(ePwd.value)
                }
            }
        }, function(ret, err) {
            hideLoading();
            console.log(JSON.stringify(ret));
            console.log(JSON.stringify(err));
            if (ret) {
                //验证注册相同信息
                if (ret.error) {
                    toast('公共卫生:此账号已被注册请前往登录', 3000);
                    return;
                } else {
                  // 调取环信注册接口
                  fnEaseRegister(eUser.value, SHA1(ePwd.value));
                }
            } else {
                toast('公共卫生:注册失败请稍后再试', 3000);
            }
        });
    }

    function fnLogin() {
        api.openWin({
            name: 'login',
            url: 'widget://html/login/login.html',
            slidBackEnabled: false
        })
    }
</script>

</html>
